<template>
  <div>
    <el-row>
      <!-- 左侧树形结构 -->
      <el-col :span="4">
        <div class="tree">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>
          <el-tree @node-click="handleNodeClick" class="filter-tree" :data="EngData" :props="defaultProps"
            :filter-node-method="filterNode" ref="tree">
          </el-tree>
        </div>
      </el-col>
      <!-- 右侧信息展示区 -->
      <el-col :span="20">
        <div v-if="params.device_id" class="table">
          <!-- 工程信息区域 -->
          <el-row>
            <div class="title">工程信息 <i class="el-icon-s-goods" style="margin-left: 8px;"></i></div>
            <div class="tab">
              <el-col :span="12">
                <div>工程编号 <span class="show">{{ engineering.engineer.serial_number }}</span></div>
              </el-col>
              <el-col :span="12">
                <div>工程名称 <span class="show">{{ engineering.engineer.name }}</span></div>
              </el-col>
              <el-col :span="12">
                <div>工程类型 <span class="show">{{ engineering.engineer.type }}</span></div>
              </el-col>
              <el-col :span="12">
                <div>工程状态
                  <el-button :type="statusType(engineering.engineer.status)" plain disabled>
                    {{ engineering.engineer.status }}
                  </el-button>
                </div>
              </el-col>
              <el-col :span="12">
                <div>开始时间 <span class="show">{{ engineering.engineer.begin_time }}</span></div>
              </el-col>
              <el-col :span="12">
                <div>结束时间 <span class="show">{{ engineering.engineer.end_time }}</span></div>
              </el-col>
              <el-col :span="24">
                <div>地址 <span class="show">{{ engineering.engineer.address }}</span></div>
              </el-col>
              <el-col :span="24">
                <div>工程负责人 <span class="show">{{ engineering.engineer.charge_id }}</span></div>
              </el-col>
            </div>
          </el-row>
          <!-- 设备信息区域 -->
          <el-row style="padding-top: 30px;">
            <div class="title">设备信息 <i class="el-icon-video-camera-solid" style="margin-left: 8px;"></i></div>
            <div class="tab">
              <el-col :span="12">
                <div>工程设备 <span class="show">{{ device.serial_number }}</span></div>
              </el-col>
              <el-col :span="12">
                <div>设备名称 <span class="show">{{ device.name }}</span></div>
              </el-col>
              <el-col :span="12">
                <div>绑定状态
                  <el-button :type="device.bind_status == '已绑定' ? 'success' : 'danger'" plain disabled>
                    {{ device.bind_status }}
                  </el-button>
                </div>
              </el-col>
              <el-col :span="12">
                <div>在线状态
                  <el-button :type="device.online_status == '在线' ? 'success' : 'danger'" plain disabled>
                    {{ device.online_status }}
                  </el-button>
                </div>
              </el-col>
            </div>
          </el-row>
        </div>
        <div v-else style="line-height: 50px; color: cornflowerblue; font-size: 20px; text-align: center;">
          请点击设备查看数据
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { get } from '@/utils/request'
export default {
  data() {
    return {
      filterText: '',
      // 树形结构配置
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 树形结构数据
      EngData: [],
      params: {
        engineer_id: "",
        device_id: ""
      },
      // 工程信息数据 (单独存储)
      engineering: {
        engineer: {
          serial_number: "",
          name: "",
          type: "",
          status: "",
          begin_time: "",
          end_time: "",
          address: "",
          charge_id: ""
        }
      },
      // 设备信息数据 (单独存储)
      device: {
        serial_number: "",
        name: "",
        bind_status: "",
        online_status: ""
      }
    }
  },
  watch: {
    // 监听过滤文本变化，触发树形过滤
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    // 获取工程设备树数据
    async getEngDevData() {
        const res = await get('/engineer/findEngineerDeviceTree');
        this.EngData = res.data;
    },
    // 树形节点点击事件
    handleNodeClick(data) {
      if (!data.children) {
        // 调用方法加载设备详情，并传入设备 ID
        this.deviceDetail(data.id);
        this.params.device_id = data.id;
      }
    },
    // 树形节点过滤方法
    filterNode(value, data) {
      if (!value) return true;
      return data.name?.indexOf(value) !== -1;
    },
    // 查询设备信息，并更新到 device 对象
    async deviceDetail(device_id) {
      // 假设接口返回的数据结构包含 engineer 和 device 信息
      let res = await get("/device/findDeviceDetail", { id: device_id });
      // 更新工程信息
      this.engineering = res.data;
      // 提取并更新设备信息
      this.device = {
        serial_number: res.data.serial_number || "",
        name: res.data.name || "",
        bind_status: res.data.bind_status === 1 ? "已绑定" : "未绑定",
        online_status: res.data.online_status === 1 ? "在线" : "离线"
      };
    },
    statusType(status) {
      switch (status) {
        case '监测中':
          return 'success';
        case '未绑定':
          return 'warning'; 
        case '已结束':
          return 'danger';  
        default:
          return 'info'; 
      }
    }
  },
  created() {
    // 页面加载时获取树形数据
    this.getEngDevData();
    this.params.device_id = "";
  }
}

</script>
<style scoped>
/* 左侧树形区域样式 */
.tree {
  height: calc(100vh - 60px);
  padding-right: 20px;
  border-right: 1px solid #ececec;
  margin-right: 10px;
}
/* 右侧内容区域样式 */
.table {
  padding: 0px;
}
/* 标题样式 */
.title {
  height: 30px;
  background-color: rgb(206, 241, 220);
  border-radius: 10px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  padding-left: 10px;
}
/* 内容项样式 */
.tab {
  padding-top: 15px;
  width: 98%;
}
.tab>.el-col>div {
  padding-top: 20px;
  /* 每个信息项的上内边距 */
  font-size: 14px;
  font-weight: bold;
}
.show {
  padding-left: 10px;
  font-weight: normal;
  color: #6c6f74;
}
.el-button {
  margin-left: 15px;
}
</style>